<template>
    <div class="welcome-container">
      <!-- 复用导航栏 -->
      <div class="header">
        <div class="logo">
          <img src="@/assets/treval/wallhaven1.png" alt="景区logo">
          <span>云南</span>
        </div>
        <el-menu 
          mode="horizontal"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="navigateToHome">首页</el-menu-item>
          <el-menu-item index="2" @click="navigateToIntro">景区介绍</el-menu-item>
          <el-menu-item index="3" @click="navigateToCommend">推荐</el-menu-item>
          <el-menu-item index="4" @click="navigateToSearch" class="is-active">搜索</el-menu-item>
          <el-menu-item index="5">个人中心</el-menu-item>
        </el-menu>
      </div>
  
      <!-- 推荐内容区域 -->
      <div class="recommend-container">
        <div class="search-container">
            <div class="search-box">
                <el-select 
                v-model="searchType"
                class="search-type"
                placeholder="搜索类型">
                <el-option label="名称搜索" value="name" />
                <el-option label="标签搜索" value="tag" />
                </el-select>
                <el-input
                v-model="searchKeyword"
                placeholder="输入景区名称或关键词"
                class="search-input"
                @keyup.enter="performSearch">
                <template #prefix>
                    <el-icon><search /></el-icon>
                </template>
                </el-input>
                <el-button 
                type="primary" 
                class="search-button"
                @click="performSearch">
                <el-icon class="search-icon">el-icon-search</el-icon>
                </el-button>
            </div>
        </div>
        <div class="recommend-list">
          <div 
            class="recommend-card" 
            v-for="scenic in recommendScenics" 
            :key="scenic.id"
            @click="viewDetails(scenic.id)">
            <img :src="scenic.image" class="recommend-image">
            <div class="recommend-info">
              <h3>{{ scenic.name }}</h3>
              <div class="traffic-indicator">
                <div class="progress-container">
                  <div 
                    class="progress-bar"
                    :class="{
                      'green': scenic.visitors < 1000,
                      'yellow': scenic.visitors >= 1000 && scenic.visitors < 2000,
                      'red': scenic.visitors >= 2000
                    }"
                    :style="{ width: (Math.min(scenic.visitors, 3000)/3000*100) + '%' }">
                  </div>
                </div>
                <span class="traffic-count">{{ scenic.visitors }}人</span>
                <span class="traffic-status">
                  {{ 
                    scenic.visitors < 1000 ? '舒适' :
                    scenic.visitors < 2000 ? '一般' : '拥挤'
                  }}
                </span>
              </div>
              <div class="tag-container">
                <el-tag 
                  v-for="(tag, index) in scenic.tags.slice(0,3)"
                  :key="index"
                  type="info"
                  class="recommend-tag">
                  {{ tag }}
                </el-tag>
              </div>
              <el-rate 
                v-model="scenic.score"
                disabled
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
              </el-rate>
              <p class="recommend-desc">{{ scenic.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Icon } from 'element-ui'

  export default {
    data() {
      return {
        recentTags: ['自然风光', '古镇风情', '生态保护', '骑行路线', '摄影胜地'], // 示例数据
        recommendScenics: [
        {
          id: 101,
          name: '洱海生态走廊',
          visitors: 800, // 新增人流量
          tags: ['自然风光', '骑行路线', '摄影胜地', '生态保护'],
          score: 4.7,
          description: '环洱海生态廊道全长129公里...',
          image: require('@/assets/treval/湖.jpg')
          },
          {
          id: 102,
          name: '沙溪古镇',
          visitors: 1500, // 新增人流量
          tags: ['茶马古道', '历史遗迹', '慢生活', '古镇风情'],
          score: 4.6,
          description: '保存最完整的茶马古道集市...',
          image: require('@/assets/treval/游客.jpg')
          }
        ],
        searchType: 'name', 
        searchKeyword: '',
        components: {
            [Icon.name]: Icon,  // 注册图标组件
            Search: Icon  // 为搜索图标创建别名
        },
      }
    },
    methods: {
      // 复用原有导航方法
      navigateToHome() {
        this.$router.push('/treval/welcome');
      },
      navigateToIntro() {
        this.$router.push('/treval/intro');
      },
      navigateToCommend() {
          this.$router.push('/treval/commend');
      },
      navigateToSearch() {
        this.$router.push('/treval/search');
      },
      viewDetails(id) {
        this.$router.push(`/treval/scenic/${id}`);
      }
    }
  }
  </script>
  
  <style scoped>
  .welcome-container {
    background-color: #e3ded0;
    overflow-x: hidden; /* 防止横向滚动 */
    
    /* 新增全局宽度约束 */
    * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }
  
  /* 通用图片约束 */
  .welcome-container img {
    max-width: 100%;
    height: auto;
    display: block; /* 消除图片底部间隙 */
  }
  
  
  .header {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* 提升层级确保覆盖所有元素 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
    position: fixed;
    top: 0;
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    font-weight: bold;
  }
  
  /* 优化菜单项样式 */
  .el-menu {
    background: transparent !important; /* 透明背景 */
  }
  
  .el-menu-item {
    font-size: 18px !important;  /* 加大字体 */
    font-weight: 600 !important; /* 加粗字体 */
    padding: 0 20px !important; /* 增加间距 */
    transition: all 0.3s !important;
  }
  
  .el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* 悬停效果 */
    border-bottom: 2px solid #ffd04b !important; /* 下划线指示 */
  }
  
  .el-menu-item.is-active {
    color: #ffd04b !important;
    border-bottom: 2px solid #ffd04b !important;
    background-color: rgba(173, 216, 230, 0.3) !important; /* 淡蓝色半透明背景 */
    backdrop-filter: blur(8px) !important; /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(8px) !important; /* 兼容Safari */
    transition: all 0.3s !important; /* 添加过渡动画 */
  }
  
  .el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 2px solid #ffd04b !important;
    backdrop-filter: blur(4px) !important; /* 悬停时添加轻度模糊 */
    -webkit-backdrop-filter: blur(4px) !important;
  }
  
  .logo {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 24px;
    img {
      height: 40px;
      margin-right: 15px;
    }
  }
  
  /* 推荐列表专属样式 */
  .recommend-container {
    padding: 120px 5% 0;
  }
  
  .recommend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px 0;
  }
  
  .recommend-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
  }
  
  .recommend-card:hover {
    transform: translateY(-5px);
  }
  
  .recommend-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .recommend-info {
    padding: 15px;
  }
  
  .tag-container {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .recommend-tag {
    padding: 4px 12px;
    border-radius: 15px;
    background: rgba(241, 198, 78, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .recent-view {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .recent-title {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  .recent-tag {
    margin-right: 10px;
    padding: 8px 15px;
    border-radius: 15px;
    background: rgba(109, 184, 222, 0.2);
    color: #2c3e50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .traffic-count {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
  }
  
  .traffic-indicator {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px; /* 缩小间距为8px */
  }
  
  .progress-container {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    transition: all 0.3s;
    
    &.green { background: #67C23A; }
    &.yellow { background: #E6A23C; }
    &.red { background: #F56C6C; }
  }
  
  .traffic-status {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
  }

  .search-box {
        display: flex;
        align-items: center; /* 垂直居中 */
        gap: 10px;
        margin-bottom: 30px;
        background: rgba(187, 234, 222, 0.4);
        backdrop-filter: blur(8px) !important; /* 磨砂玻璃效果 */
        border-radius: 30px; /* 更圆的边框 */
        padding: 8px 15px; /* 调整内边距 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease; /* 添加过渡效果 */
    }

    .search-box:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 悬停时阴影效果 */
    }

    .search-type {
        width: 140px;
        border-radius: 25px; /* 更圆的边框 */
        padding: 5px 10px; /* 调整内边距 */
    }

    .search-input {
        flex: 1;
        border-radius: 25px; /* 更圆的边框 */
        padding: 8px 15px; /* 调整内边距 */
    }

    .search-button {
        width: 45px; /* 缩小按钮尺寸 */
        height: 45px;
        border-radius: 50%;
        padding: 0; /* 移除按钮内边距 */
        background: #ffd04b;
        border: none;
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        transition: background-color 0.3s;
    }

    .search-button:hover {
        background-color: #ffab00;
    }

    .search-icon {
        font-size: 20px;
        color: #fff;
    }

    .el-input__prefix {
        margin-right: 8px; /* 调整前缀图标间距 */
    }
  </style>